<template lang="pug">
	.input-line-wrap(:class="{'input-line-wrap-active': isActive,'input-line-border':showBorder}" @click="inputAction")
		.left-box(v-if="leftText")
			.text-box {{leftText}}
		.input-wrap
			input(:placeholder="placeholder" type="text" @blur='blurHandle' @focus='focusHandle' v-model='inputtext' :password="password" @input="returnInput" :placeholder-style="placeholderStyle" placeholder-class="placeholderClass" :maxlength="maxlength" :disabled='disabled' v-if="type === 'text'")
			input(:placeholder="placeholder" type="number" @blur='blurHandle' @focus='focusHandle' v-model='inputtext' :password="password" @input="returnInput" :placeholder-style="placeholderStyle" placeholder-class="placeholderClass" :maxlength="maxlength" :disabled='disabled' v-if="type === 'number'")
			input(:placeholder="placeholder" type="idcard" @blur='blurHandle' @focus='focusHandle' v-model='inputtext' :password="password" @input="returnInput" :placeholder-style="placeholderStyle" placeholder-class="placeholderClass" :maxlength="maxlength" :disabled='disabled' v-if="type === 'idcard'")
			input(:placeholder="placeholder" type="digit" @blur='blurHandle' @focus='focusHandle' v-model='inputtext' :password="password" @input="returnInput" :placeholder-style="placeholderStyle" placeholder-class="placeholderClass" :maxlength="maxlength" :disabled='disabled' v-if="type === 'digit'")
			.clear-box(@click="clearInput" v-if="isClaerActive")
				.clear-icon
		.right-box(@click="rightEvent")
			send-code(v-if="mode === 'verification'" :codeType="codeType" :phone="phone" :time="time")
			.showPassword-box(:class="{'showPassword-active': isShowPasswordActive}" v-if="mode === 'showPassword'")
			i.arrow-right(v-if="showArrow")
</template>
<script>
import sendCode from '@/components/send-code'
export default {
	data() {
		return {
			isClaerActive: false,
			isShowPasswordActive: false,
			isActive: false,
			focus: false,
			inputtext: '',
			placeholderStyle: 'color:#CACACA'
		}
	},
	props: {
		password: {
			type: Boolean,
			default: false
		},
		type: {
			type: String,
			default: 'text'
		},
		placeholder: {
			type: String,
			default: ''
		},
		maxlength: {
			type: Number,
			default: 100
		},
		leftText: {
			type: String,
			default: ''
		},
		mode: {
			type: String,
			default: ''
		},
		phone: {
			type: String,
			default: ''
		},
		time: {
			type: Number,
			default: 60
		},
		codeType: {
			type: String,
			default: ''
		},
		disabled: {
			type: Boolean,
			default: false
		},
		showArrow: {
			type: Boolean,
			default: false
		},
		showBorder: {
			type: Boolean,
			default: true
		}
	},
	computed: {},
	mounted() {},
	onPullDownRefresh() {},
	onReachBottom() {},
	methods: {
		clearInput() {
			this.inputtext = ''
			this.isClaerActive = false
			this.$emit('getValue', this.inputtext)
		},
		focusHandle() {
			this.isActive = true
		},
		blurHandle() {
			this.isActive = false
		},
		returnInput() {
			this.isClaerActive = this.inputtext.toString().length >= 1
			this.$emit('getValue', this.inputtext)
		},
		rightEvent() {
			if (this.mode === 'showPassword') {
				this.isShowPasswordActive = !this.isShowPasswordActive
				this.password = !this.isShowPasswordActive
			}
		},
		inputAction() {
			this.$emit('inputAction')
		}
	},
	watch: {},
	components: {
		sendCode
	}
}
</script>

<style lang="stylus">
	.placeholderClass
		font-size 28px
		line-height 40px
	.input-line-wrap-active
		border-bottom 1px solid themeColor!important
	.input-line-wrap
		box-sizing border-box
		align-items center
		height 110px
		display flex
		margin 0 40px
		border-bottom 1px solid transparent
		.left-box
			min-width 150px
			font-size 28px
			line-height 40px
			color blackFontColor1A
			font-weight 500
			white-space nowrap
		.right-box
			display flex
			justify-content flex-end
			height 100%
			align-items center
			.showPassword-box{
				min-width 48px
				height 48px
				centerBackground("../../assets/image/common/icon_eye.png")
			}
			.showPassword-active{
				centerBackground("../../assets/image/common/icon_eye_light.png")
			}
		.arrow-right
			margin-left 6px
			width 16px
			height 24px
			centerBackground("../assets/image/common/arrow_right_grey.png")
		.input-wrap
			width 100%
			height 100%
			display flex
			.clear-box
				height 100%
				min-width 60px
				display flex
				justify-content center
				align-items center
				.clear-icon
					width 48px
					height 48px
					centerBackground("../../assets/image/common/icon_clear.png")
			input
				box-sizing border-box
				padding 0 20px
				width 100%
				height 100%
				font-size 28px
				line-height 40px
				color blackFontColor
	.input-line-border
		border-bottom borderStyle
</style>
